<template>
  <header id="app-header" :class="[isHome ? isDown ? 'light-mode' : '' : 'light-mode']">
    <nav id="nav">
      <div class="menu-start">
        <router-link :to="{name: 'Home'}" class="logo">
          <img
            v-if="!isHome"
            src="../assets/img/logo_b.svg"
            class="fluid-img logo-img"
            alt="SDAY Logo"
          />
          <img
            v-else-if="!isDown"
            src="../assets/img/logo_w.svg"
            class="fluid-img logo-img"
            alt="SDAY Logo"
          />
          <img v-else src="../assets/img/logo_b.svg" class="fluid-img logo-img" alt="SDAY Logo" />
        </router-link>
      </div>
      <ul class="menu-center">
        <li v-for="link in menu" :key="link.title" class="menu-item">
          <a
            v-if="link.children && link.children.length"
            class="menu-link"
            href="javascript:;"
          >{{link.title}}</a>
          <router-link v-else class="menu-link" :to="{name: link.path}">{{link.title}}</router-link>
          <ul v-if="link.children && link.children.length" class="sub-menu">
            <li class="sub-item menu-item" v-for="subLink in link.children" :key="subLink.title">
              <router-link class="menu-link" :to="{ name: subLink.path }">{{subLink.title}}</router-link>
            </li>
          </ul>
        </li>
      </ul>
      <div class="menu-end">
        <span class="user-location" v-if="isLogin">{{ userInfo.city || 'Shenzhen'}}</span>
        <div class="language-switch">
          <router-link class="current" to="/">EN</router-link>
          <router-link to="/cn">CN</router-link>
        </div>
        <div class="menu-user" :class="[isLogin? 'user_loged' : '']">
          <i :class="[isLogin? 'icon-useron' : 'icon-user']"></i>
          <router-link v-if="!isLogin" :to="{ name: 'UserLogin' }">My Account</router-link>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Header",
  data() {
    return {
      isMobile: false,
      isDown: false
    };
  },
  computed: {
    ...mapGetters(["isLogin", "userInfo"]),
    isHome() {
      return this.$route.name === "Home";
    },
    menu() {
      return [
        {
          title: "sday 2019",
          path: null,
          children: [
            {
              title: "enter now",
              path: this.isLogin ? "UserInformation" : "UserLogin"
            },
            {
              title: "about sday",
              path: "Sday2019About"
            },
            {
              title: "must knows",
              path: "MustKnows"
            }
          ]
        },
        {
          title: "nomination",
          path: "Nomination"
        },
        {
          title: "jury",
          path: null,
          children: [
            {
              title: "jury panel",
              path: "JuryPanel"
            },
            {
              title: "judging info",
              path: "JudgingInfo"
            }
          ]
        },
        {
          title: "archive",
          path: "Archive"
        },
        {
          title: "media",
          path: null,
          children: [
            {
              title: "press release",
              path: "PressRelease"
            },
            {
              title: "news",
              path: "News"
            },
            {
              title: "videos",
              path: "Videos"
            },
            {
              title: "photos",
              path: "Photos"
            }
          ]
        },
        {
          title: "download",
          path: "Download"
        }
      ];
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle, true);
  },
  methods: {
    scrollHandle(e) {
      if (this.isHome) {
        const scrollTop =
          e.target.documentElement.scrollTop || e.target.body.scrollTop;

        this.isDown = scrollTop > 80;
      } else {
        this.isDown = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/iconfont";

header#app-header {
  height: 90px;
  padding: 10px 0;
  position: sticky;
  z-index: 98;
  top: 0;
  background-color: transparent;
  transition: all 0.3s;

  &.light-mode {
    background-color: #fff;
    border-bottom: 1px solid #ededed;

    #nav {
      a,
      i.icon-user {
        color: #202020 !important;
      }

      a.menu-link:hover {
        color: $primary !important;
      }
    }
  }

  #nav {
    display: flex;
    height: 100%;
    align-items: center;
    margin: 0 40px;
    @media (max-width: 768px) {
      margin: 0 20px;
    }
    background: transparent;

    a {
      color: white;
    }

    .menu-start {
      .logo-img {
        height: 40px;
      }
    }

    .menu-center {
      list-style: none;
      margin-left: 3em;
      display: flex;

      .menu-item {
        list-style: none;

        a.menu-link {
          font: 400 15px/30px "Futura";
          text-transform: uppercase;
          letter-spacing: 0.05em;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      > li.menu-item {
        margin-left: 50px;
        position: relative;

        &:hover {
          .sub-menu {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
          }
        }

        .sub-menu {
          position: absolute;
          transition: all 0.3s;
          z-index: 99;
          transform: translateY(6px);
          top: 100%;
          left: 50%;
          padding: 10px 0;
          border-radius: 5px;
          width: 160px;
          margin-left: -80px;
          margin-top: 10px;
          background-color: #fff;
          visibility: hidden;
          opacity: 0;

          .sub-item {
            text-align: center;

            a.menu-link {
              display: inline-block;
              vertical-align: top;
              text-transform: uppercase;
              color: #202020;
              font: 400 12px/40px "Futura";
              transition: all ease 0.3s;

              &:hover {
                text-decoration: none;
                color: $primary !important;
              }
            }
          }
        }
      }
    }

    .menu-end {
      margin-left: auto;
      text-align: right;
      .user-location {
        margin-right: 1em;
        position: relative;
        bottom: -2px;
      }
      .language-switch {
        display: inline-block;

        a {
          position: relative;
          margin: 0 10px;
          display: inline-block;
          vertical-align: top;
          font: 500 14px/30px "Futura";
          letter-spacing: 0.05em;
          transition: color 0.3s;

          &:last-of-type {
            margin-right: 0;
          }

          &:hover {
            color: #888;
          }

          &.current {
            text-decoration: underline;
          }

          &:nth-of-type(n + 2)::before {
            content: "";
            position: absolute;
            top: 50%;
            left: -10px;
            width: 1px;
            height: 14px;
            margin-top: -7px;
            background-color: #fff;
          }
        }
      }

      .menu-user {
        margin-top: 5px;
        &.user_loged {
          text-align: right;
        }
        i.icon-user {
          display: inline-block;
          vertical-align: baseline;
          margin-right: 4px;
          font-size: 18px;
          color: #fff;
        }
        i.icon-useron {
          color: $primary;
        }
        a:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
